<template>
    <div id="speed"/>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted, reactive} from "vue";
const setWidthHeight = reactive({
    width:'400px',
    height: '400px'
})
onMounted(()=> {
    console.log('speed - mounted')
    draw(setWidthHeight)
})
function draw(setWidthHeight){
    var chartDom = document.getElementById('speed');
    var myChart = echarts.init(chartDom,null,setWidthHeight);
    var option;

    option = {
        series: [
            {
                type: 'gauge',
                progress: {
                    show: true,
                    width: 12
                },
                axisLine: {
                    lineStyle: {
                        width: 16
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 15,
                    distance: 10,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 20,
                    color: '#999',
                    fontSize: 20
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                        borderWidth: 10
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 50,
                    offsetCenter: [0, '70%']
                },
                data: [
                    {
                        value: 70
                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);
}
</script>

<style scoped>

</style>